<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页设置</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layui/css/modules/layer/default/layer.css">
    <style>
        body{
            overflow-x: hidden;
            background: #eaeaea;
        }
        .layui-layer-content::-webkit-scrollbar {/*滚动条整体样式*/
            width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 8px;
            scrollbar-arrow-color:red;
        }
        .layui-layer-content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218,0.2);
            box-shadow: inset 0 0 5px rgba(218, 218, 218,0.2);
            background: rgba(218, 218, 218,0.5);
            scrollbar-arrow-color:red;
        }
        .layui-layer-content::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218,0.2);
            box-shadow: inset 0 0 5px rgba(218, 218, 218,0.2);
            border-radius: 0;
            background: rgba(218, 218, 218,0.1);
        }
        .homeConfig{
            display: none;
            height: 100%;
        }
        .tabAdd{
            width: 50px;
            height: 30px;
            display: inline-block;
            text-align: center;
            cursor: pointer;

        }
        .tabAdd i{
            font-size: 20px;
            color: #1E9FFF;
        }
        .wheelImg{
            width: 150px;
            height: 37px;
            border: 1px #ccc solid;
            display: inline-block;
            position: absolute;
            left: 150px;
        }
        .wheelImg img {
            width: 100%;
            height: 100%;
        }
        .wheelUrl{
            margin-top: 20px;
        }
        .wheelUrl .layui-input-block{
            width: 180px;
        }
        .tab_1 i{
            display: none!important;
        }
        .configTitle{
            width: 100%;
            height: 50px;
            line-height: 50px;
            margin-left: 20px;
            font-size: 16px;
            font-weight: bold;
        }
        .wheelConfig .layui-form-label{
            width: 100px;
        }
        .wheelConfig .layui-this:after,.mouldConConfig .layui-this:after{
            border-bottom:0px!important;
        }
        .wheelConfig .layui-tab-title,.mouldConConfig .layui-tab-title{
            border-bottom-style: none;
            padding-bottom: 10px;
        }
        .wheelConfig .layui-tab-title li, .mouldConConfig .layui-tab-title li {
            background: #e8e8e8;
            box-sizing: border-box;
            margin: 5px;
            border-radius: 4px;
        }
        .wheelConfig .layui-this,.mouldConConfig .layui-this {
            background: #1E9FFF!important;
            color: #fff!important;
        }
        .wheelConfig .layui-tab,.mouldConConfig .layui-tab{
            margin: 10px;
            background: #f7f7f7;
            box-sizing: border-box;
            padding: 10px;
            border-radius: 5px;
        }
        .wheelUrl .layui-form-label{
            width: 80px;
        }
        .mouldTitleConfig .layui-form-label{
            width: 100px;
        }
        .mouldTitleName .layui-form-label{
            width: 80px;
        }
        .mouldTitleName .layui-input-block{
            width: 180px;
        }
        .mould_web .layui-input-block{
            width: 180px;
        }
        .layui-layer-content{
            overflow-x: hidden!important;
        }
        .mould_btn_tab{
            background: #fff!important;
            margin: 0px!important;
        }
        .mould_btnUrl{
            margin-top: 20px;
        }
        .mould_btnUrl .layui-input-block{
            width: 140px!important;
        }
        .mould_btn{
            display: none;
        }
        .layui-form-onswitch{
            border-color: #1E9FFF;
            background-color: #1E9FFF;
        }
        .mould_news{
            display: none;
        }
        .container-demo{
            width: 80%;
            margin: auto;
        }
        .mould-demo{
            width: 100%;
            height: 400px;
            margin: auto;
            margin-top: 20px;
        }
        .container-demo>div{
            margin-bottom: 20px;
            background: #fff!important;
        }
        .mould-demo .title{
            padding: 10px;
            margin: auto;
            font-size: 20px;
            text-align: center;
            font-weight: bold;
        }
        .m_news_add{
            margin: auto;
            overflow: hidden;
            padding: 20px 0px;
            box-sizing: border-box;
        }
        #wheel-demo{
            margin: auto;
            margin-top: 20px;
        }
        .carouselItem{
            cursor: pointer;
        }
        .m_btn{
            display: inline-block;
            padding: 10px;
            cursor: pointer;
        }
        .configSave{
            width: 90%;
            margin: 20px auto;
            display: block;
        }
        .m_icon_list{
            padding: 0px 20px;
        }
</style>
</head>
<body>
<div class="container-demo">
    <!--轮播图-->
    <div class="layui-carousel" id="wheel-demo">
        <div carousel-item>
        </div>
    </div>
    <!--默认模块1-->
    <div class="mould-demo mould1">
        <div class="title"></div>
        <div class="con"></div>
    </div>
</div>

<script src="../../JS/jquery-2.0.3.js"></script>
<script src="../../layui/lay/modules/layer.js"></script>
<script src="../../layui/layui.js"></script>
<script>
    //当前点击轮播图上传按钮下标
    var wheelIndex = 1;
    //当前模型按钮类型上传按钮下标
    var mouldBtnIndex = 1;
    $(function () {

        layer.open({
            title: '首页配置',
            type: 1, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            shade: false,
            closeBtn:0,
            maxmin:true,
            anim: 3,
            offset: ['0px', '50px'],
            isOutAnim:false,
            area: ['450px', '100%'],
            content: $('.homeConfig'), //这里content是一个普通的String
            success: function(layero, index) {
                $('.layui-layer-max').hide();
            },
            min:function () {
                $('.layui-layer-max').show();
            },
            restore: function() {
                $('.layui-layer-max').hide();
            }
        })

        //模块按钮类型图片上传
        $('.mouldConConfig').on('click','.mould_btn_upload',function () {
            //获取当前图片下标
            mouldBtnIndex = f_id($(this));
        })

        //模块按钮类型设置连接地址
        $('.mouldConConfig').on('blur','.mould_btnUrl input',function () {
            var index = f_id($(this));
            var url = $(this).val();
            $('.mould'+mouldIndex).find('.m_btn_'+index).attr('to',url);
        })

        //模块按钮类型点击触发事件
        $('.container-demo').on('click','.m_btn',function () {
            var url = $(this).attr('to');
            parent.document.getElementById("view").src = url ;
        })

        //模块标题
        $('.mouldConConfig').on('input propertychange','.mouldTitleIpt',function () {
            var index = f_id($(this));
            $('.mould'+index).find('.title').text($(this).val())
        })

        //模块宽高
        $('.mouldConConfig').on('blur','.mouldWidth input',function () {
            var index = f_id($(this));
            var val = $(this).val() || 100;
            $('.mould'+index).css('width',val+'%')

        })
        var mouldHeight = 400;
        $('.mouldConConfig').on('blur','.mouldHeight input',function () {
            var index = f_id($(this));
            mouldHeight = $(this).val() || 400;
            $('.mould'+index).height(mouldHeight);
            $('.mould'+index).find('.con').height(mouldHeight-50);
            //判断是否是iframe
            if ($('.mould'+index).find('.mouldIfm').length > 0) {
                $('.mould'+index).find('.mouldIfm').height(mouldHeight-50);
            }
        })

        //模块类型网页地址
        $('.mouldConConfig').on('blur','.mouldUrl input',function () {
            var index = f_id($(this));
            var val = $(this).val();
            $('.mould'+index).find('.con').html('<iframe class="mouldIfm" src="'+val+'" width="100%" height="'+mouldHeight+'px" frameborder="none"></iframe>')
        })

        //轮播图模拟上传获取图片
        $('.wheelConfig').on('click','.wheelImgBtn',function () {
            //获取当前轮播图下标
            wheelIndex = $(this).attr('id').replace(/[^0-9]/ig,"");
        })

        //轮播图宽高
        $('.wheelConfig').on('blur','.wheelWidth input',function () {
            var val = $(this).val() || 100;
            $('#wheel-demo').css('width',val+'%')

        })
        var wheelHeight = 400;
        $('.wheelConfig').on('blur','.wheelHeight input',function () {
            wheelHeight = $(this).val() || 400;
            $('#wheel-demo').height(wheelHeight);
        })

        //轮播图设置连接地址
        $('.wheelConfig').on('blur','.wheelUrl input',function () {
            var index = f_id($(this));
            var wheelUrl = $(this).val();
            $('.carouselItem-'+index).attr('to',wheelUrl);
        })

        //轮播图点击事件
        $('#wheel-demo').on('click','.carouselItem',function () {
            var url = $(this).attr('to');
            parent.document.getElementById("view").src = url ;
        })
        
        //保存首页配置数据
        $('.configSave').click(function () {
            var configObj = {};
            //是否存在轮播图
            if ($('.wheelSwitch').next().hasClass('layui-form-onswitch')) {
                configObj.wheel = {};
                //获取轮播图的尺寸
                configObj.wheel.width = $('.wheelWidth input').val() || 100;
                configObj.wheel.height = $('.wheelHeight input').val() || 400;

                //获取轮播图tab数据
                configObj.wheel.tab = [];
                $('.wheel_tab .layui-tab-content>div').each(function () {
                    var wheelTab = {};
                    //获取轮播图片
                    wheelTab.img = $(this).find('.wheelImg img').attr('src');
                    wheelTab.url = $(this).find('.wheelUrl input').val();
                    configObj.wheel.tab.push(wheelTab)
                })
            } else {
                configObj.wheel = null
            }

            //模块配置
            configObj.mould = [];
            $('.mould_ul').next().find('>div').each(function () {
                var mouldObj = {};
                //判断是否显示标题
                if ($(this).find('.mouldTitleSwitch .layui-form-switch').hasClass('layui-form-onswitch')) {
                    mouldObj.title = $(this).find('.mouldTitleName input').val();
                } else {
                    mouldObj.title = null
                }
                //获取模块尺寸
                mouldObj.width = $(this).find('.mouldWidth input').val() || 100;
                mouldObj.height = $(this).find('.mouldHeight input').val() || 400;

                //获取内容类型
                var mouldtype = $(this).find('.mouldType').next().find('input').val();
                mouldObj.type = mouldtype;
                switch (mouldtype) {
                    case '网页' :
                        mouldObj.url = $(this).find('.mould_web input').val();
                        break
                    case '新闻' :
                        mouldObj.url = $(this).find('.mould_news input').val() || newsUrl;
                        break
                    case '按钮' :
                        mouldObj.tab = [];
                        $(this).find('.mould_btn .layui-tab-content>div').each(function () {
                            var mouldBtn = {};
                            mouldBtn.img = $(this).find('.wheelImg img').attr('src');
                            mouldBtn.url = $(this).find('.mould_btnUrl input').val();
                            mouldObj.tab.push(mouldBtn);
                        })
                        break
                }
                configObj.mould.push(mouldObj);
            })
            console.log( JSON.stringify(configObj))

            //调用插入首页配置接口
            parent.ajaxGet(parent.defaultUrl+'/insertMP',{'content':JSON.stringify(configObj)},function () {
                parent.layer.msg('保存成功')
            })
        })

    })
    var ins = null;
    //定义当前操作模块的下标
    var mouldIndex = 1;
    var newsUrl = '';
    var m_flag = false;
    layui.use(['element','form','upload','layedit','carousel'], function () {
        var element = layui.element
            ,form = layui.form
            ,upload = layui.upload
            ,layedit = layui.layedit
            , carousel = layui.carousel;

        var active = {
            tabAdd: function(filter,id,name,fn) {
                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                element.tabAdd(filter, {
                    title: name,
                    content: '<div data-id="' + id + '">'+fn(id)+'</div>',
                    id: id //规定好的id
                });
                $('.tabAdd').remove();
                $('.tab_1').parent().append('                <div class="tabAdd">\n' +
                    '                    <i class="layui-icon ">&#xe61f;</i>\n' +
                    '                </div>')
            },
            tabChange: function(filter,id) {
                //切换到指定Tab项
                element.tabChange(filter, id); //根据传入的id传入到指定的tab项
            }
        }

        //获取首页配置数据
        //获取用户账号
        if (parent.getLocalStorage('JSXM')) {
            var user = parent.getLocalStorage('JSXM').userCount;
        }
        parent.ajaxGet(parent.defaultUrl+'/selMP',{user:user,enable:0},function (data) {
            if (!data.data || !data.data[0].PAGE_CONTENT) return;
            data = JSON.parse(data.data[0].PAGE_CONTENT);
            console.log(data)
            //判断是否有轮播图
            if (data.wheel !==null) {
                $('.wheelConfig').find('.wheelWidth input').val(data.wheel.width);
                $('.wheelConfig').find('.wheelHeight input').val(data.wheel.height);
                if (data.wheel.tab.length>0) {
                    for (var i=0,l=data.wheel.tab.length;i<l;i++) {
                        if (i !== 0) {
                            wheelTabAdd(active,upload,i+1);
                        }
                        var $wheel = $('.wheelConfig').find('div[data-id = '+(i+1)+']');
                        $wheel.find('.wheelImg img').attr('src',data.wheel.tab[i].img);
                        $wheel.find('.wheelUrl input').val(data.wheel.tab[i].url);
                        $('#wheel-demo>div').append('<div class="carouselItem" to="'+data.wheel.tab[i].url+'"><img src="'+data.wheel.tab[i].img+'"/></div>')
                    }
                }
                carousel.render({
                    elem: '#wheel-demo'
                    ,width: data.wheel.width+'%' //设置容器宽度
                    ,height:data.wheel.height+'px'
                    ,arrow: 'always' //始终显示箭头
                    ,indicator: 'none'
                    //,anim: 'updown' //切换动画方式
                });
            } else { //没有轮播图的情况 开启轮播图按钮关闭
                $('.wheelConfig .layui-form-onswitch').click();
            }
            //模块写入
            if (data.mould.length>0) {
                for(var i=0,l=data.mould.length;i<l;i++) {
                    //判断是否有标题
                    var isTitle = (data.mould[i].title !== null) ? 'block' : 'none';
                    var width = data.mould[i].width;
                    var height = data.mould[i].height;

                    //新增tab
                    if (i !== 0) {
                        mouldTabAdd(active,upload,form,i+1)
                    }

                    //获取当前模块的dom
                    var $mould = $('.mouldConConfig').find('div[data-id = '+(i+1)+']');

                    if (isTitle === 'none') {
                        $mould.find('.layui-form-onswitch').click();
                    } else {
                        $mould.find('.mouldTitleIpt').val(data.mould[i].title)
                    }
                    $mould.find('.mouldWidth input').val(width);
                    $mould.find('.mouldHeight input').val(height);
                    window.m_flag = true;
                    $mould.find('.mouldType').next().find('dd').each(function () {
                        if ($(this).text() === data.mould[i].type) {
                            $(this).click();
                            return false;
                        }
                    })
                    var html = '';
                    switch (data.mould[i].type) {
                        case '网页':
                            html = '<div style="display: '+isTitle+'" class="title">'+data.mould[i].title+'</div><div style="height:'+(height-50)+'px" class="con"><iframe frameborder="none" style="width:100%;height:'+(height-50)+'px"  src="'+data.mould[i].url+'"></iframe></div>'
                            $mould.find('.mouldUrl input').val(data.mould[i].url)
                            break;
                        case '新闻':
                            html = '<div style="display: '+isTitle+'"  class="title">'+data.mould[i].title+'</div><div style="height:'+(height-50)+'px" class="con">'+data.mould[i].url+'</div>';
                            newsUrl = data.mould[i].url;
                            break;
                        case '按钮':
                            html = '<div style="display: '+isTitle+'" class="title">'+data.mould[i].title+'</div><div style="height:'+(height-50)+'px" class="con"><div class="m_icon_list">'
                            if (data.mould[i].tab.length > 0){
                                for (var a = 0, b = data.mould[i].tab.length;a<b;a++) {
                                    if (a !== 0) {
                                        m_iconTabAdd(active,upload,element,a+1);
                                    }
                                    var $m_icon = $('.mould_btn').find('div[data-id = '+(a+1)+']');
                                    $m_icon.find('.wheelImg img').attr('src',data.mould[i].tab[a].img);
                                    $m_icon.find('.mould_btnUrl input').val(data.mould[i].tab[a].url);
                                    html += '<li to="'+data.mould[i].tab[a].url+'" class="m_btn m_btn_'+a+'"><img src="'+data.mould[i].tab[a].img+'"></li>'
                                }
                            }
                            html += '</div></div>'
                            break;
                    }
                    $('.mould'+ (i+1)).css({'width':width+'%','height':height}).html(html)
                }
            }
        })

        //模块tab删除
        element.on('tabDelete(mouldCon)', function(data){
            var index = $(this).parent().attr('lay-id');
            active.tabChange('mouldCon',data.index);
            $('.mould'+index).remove();
        });

        //轮播图图片tab删除
        element.on('tabDelete(wheel)', function(data){
            var index = $(this).parent().attr('lay-id');
            active.tabChange('wheel',data.index);
            $('#wheel-demo').find('.carouselItem-'+index).remove();
            ins.reload();
        });

        //模块按钮类型图片tab删除
        element.on('tabDelete(mouldBtn'+mouldIndex+')', function(data){
            var index = $(this).parent().attr('lay-id');
            active.tabChange('mouldBtn'+mouldIndex,data.index);
            $('.mould'+mouldIndex).find('.m_btn_'+index+'').remove();
        });

        //获取模块当前点击的下标
        element.on('tab(mouldCon)', function(data){
            mouldIndex = $('.mould_ul').children().eq(data.index).attr('lay-id');
        });

        $('.wheelConfig').on('click','.tabAdd',function () {
            var i = $(this).siblings('li').length +1;
            wheelTabAdd(active,upload,i)
        })

        $('.mould_ul').on('click','.tabAdd',function () {
            var i = $(this).siblings('li').length +1;
            mouldTabAdd(active,upload,form,i)
        })

        $('.mouldConConfig').on('click','.tabAdd',function () {
            var i = $(this).siblings('li').length +1;
            m_iconTabAdd(active,upload,element,i)
        })

        //轮播图上传图片
        wheelUpload(upload,'#wheelImgBtn1');

        //模块按钮类型上传图片
        mouldUpload(upload,'#mould_btn_upload1_1')

        form.on('switch(wheel)', function(data){
            if(data.elem.checked) {
                $('.wheel_tab').show();
                $('#wheel-demo').show();
                $('.wheelSize').show();
            } else {
                $('.wheel_tab').hide();
                $('#wheel-demo').hide();
                $('.wheelSize').hide();
            }
        });

        form.on('switch(mouldTitle)', function(data){
            var index = f_id($(data.othis));
            if(data.elem.checked) {
                $(data.othis).parent().parent().next().show();
                $('.mould'+index).find('.title').show()
            } else {
                $(data.othis).parent().parent().next().hide();
                $('.mould'+index).find('.title').hide()
            }
        });

        form.on('select(mouldtype)', function(data){
            if(data.value === '0') {
                $(data.othis).parent().parent().parent().find('.mould_web').show();
                $(data.othis).parent().parent().parent().find('.mould_btn').hide()
            } else if(data.value === '1') {
                //获取当前tab下标
                if (!m_flag) {
                    var  t_index = $(data.othis).prev().attr('name').replace(/[^0-9]/ig,"");
                    var editIndex = layer.open({
                        title: '编辑',
                        type: 2, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        skin: 'other-class ',
                        shade: false,
                        anim: -1,
                        isOutAnim:false,
                        area: ['80%', '800px'],
                        content: 'mouldWeb.html', //这里content是一个普通的String
                        success: function(layero, index) {
                            layero.find('iframe')[0].contentWindow.t_index = t_index;
                            layero.find('iframe')[0].contentWindow.editIndex = editIndex;
                            layero.find('iframe')[0].contentWindow.newsUrl = newsUrl;
                        }
                    })
                }

                $(data.othis).parent().parent().parent().find('.mould_btn').hide();
                $(data.othis).parent().parent().parent().find('.mould_web').hide();
            } else if(data.value === '2') {
                $(data.othis).parent().parent().parent().find('.mould_btn').show();
                $(data.othis).parent().parent().parent().find('.mould_web').hide();
            }
            m_flag = false;
        });

        ins = carousel.render({
            elem: '#wheel-demo'
            ,width: '100%' //设置容器宽度
            ,height:400
            ,arrow: 'always' //始终显示箭头
            ,indicator: 'none'
            //,anim: 'updown' //切换动画方式
        });
    });
    function wheelHtml(i) {
        var html = '  <button type="button" class="layui-btn layui-btn-normal wheelImgBtn" id="wheelImgBtn'+i+'">\n' +
            '                    <i class="layui-icon">&#xe67c;</i>上传图片\n' +
            '                </button>\n' +
            '                <div class="wheelImg"><img/></div>\n' +
            '                <div class="layui-form-item wheelUrl">\n' +
            '                    <label class="layui-form-label">链接地址</label>\n' +
            '                    <div class="layui-input-block">\n' +
            '                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">\n' +
            '                    </div>\n' +
            '                </div>'
        return html;
    }

    function mouldBtnHtml(i) {
       var html ='                                            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal mould_btn_upload" id="mould_btn_upload'+i+'_'+mouldIndex+'">\n' +
           '                                                <i class="layui-icon">&#xe67c;</i>上传图片\n' +
           '                                            </button>\n' +
           '                                            <div class="wheelImg"><img/></div>\n' +
           '                                            <div class="layui-form-item mould_btnUrl">\n' +
           '                                                <label class="layui-form-label">链接地址</label>\n' +
           '                                                <div class="layui-input-block">\n' +
           '                                                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">\n' +
           '                                                </div>\n' +
           '                                            </div>'
        return html;
    }
    function mouldConHtml(i) {
      var html = '                        <div class="layui-form-item">\n' +
          '                            <label class="layui-form-label">是否显示标题</label>\n' +
          '                            <div class="layui-input-block mouldTitleSwitch">\n' +
          '                                <input type="checkbox" checked="" lay-filter="mouldTitle" name="switch" lay-skin="switch">\n' +
          '                            </div>\n' +
          '                        </div>\n' +
          '                        <div class="layui-form-item mouldTitleName">\n' +
          '                            <label class="layui-form-label">标题名称</label>\n' +
          '                            <div class="layui-input-block">\n' +
          '                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题名称" autocomplete="off" class="layui-input mouldTitleIpt">\n' +
          '                            </div>\n' +
          '                        </div>\n' +
          '                            <label class="layui-form-label">尺寸比例</label>\n' +
          '                            <div class="layui-form-item mouldWidth">\n' +
          '                                <label class="layui-form-label">宽度</label>\n' +
          '                                <div class="layui-input-inline" style="width: 100px;">\n' +
          '                                    <input type="text" required lay-verify="required" placeholder="100" autocomplete="off" class="layui-input">\n' +
          '                                </div>\n' +
          '                                <div class="layui-form-mid layui-word-aux">%</div>\n' +
          '                            </div>\n' +
          '                            <div class="layui-form-item mouldHeight">\n' +
          '                                <label class="layui-form-label">高度</label>\n' +
          '                                <div class="layui-input-inline" style="width: 100px;">\n' +
          '                                    <input type="text" required lay-verify="required" placeholder="400" autocomplete="off" class="layui-input">\n' +
          '                                </div>\n' +
          '                                <div class="layui-form-mid layui-word-aux">px</div>\n' +
          '                            </div>\n' +
          '                        <div class="layui-form-item">\n' +
          '                            <label class="layui-form-label">内容类型</label>\n' +
          '                            <div class="layui-input-block">\n' +
          '                                <select class="mouldType" name="mouldtype'+i+'" lay-verify="required" lay-filter="mouldtype">\n' +
          '                                    <option value="0">网页</option>\n' +
          '                                    <option value="1">新闻</option>\n' +
          '                                    <option value="2">按钮</option>\n' +
          '                                </select>\n' +
          '                            </div>\n' +
          '                        </div>\n' +
          '                        <div class="mould_web">\n' +
          '                            <div class="layui-form-item mouldUrl">\n' +
          '                                <label class="layui-form-label">链接地址</label>\n' +
          '                                <div class="layui-input-block">\n' +
          '                                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">\n' +
          '                                </div>\n' +
          '                            </div>\n' +
          '                        </div>\n' +
          '                        <div class="mould_btn">\n' +
          '                            <div class="layui-tab layui-tab-brief mould_btn_tab"  lay-allowClose="true" lay-filter="mouldBtn'+i+'">\n' +
          '                                <ul class="layui-tab-title">\n' +
          '                                    <li  lay-id="1" class="layui-this tab_1">图片1</li>\n' +
          '                                    <div class="tabAdd">\n' +
          '                                        <i class="layui-icon ">&#xe61f;</i>\n' +
          '                                    </div>\n' +
          '                                </ul>\n' +
          '                                <div class="layui-tab-content">\n' +
          '                                    <div class="layui-tab-item layui-show">\n' +
          '                                        <div data-id="1">\n' +
          '                                            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm mould_btn_upload" id="mould_btn_upload1_'+i+'">\n' +
          '                                                <i class="layui-icon">&#xe67c;</i>上传图片\n' +
          '                                            </button>\n' +
          '                                            <div class="wheelImg"><img/></div>\n' +
          '                                            <div class="layui-form-item mould_btnUrl">\n' +
          '                                                <label class="layui-form-label">链接地址</label>\n' +
          '                                                <div class="layui-input-block">\n' +
          '                                                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">\n' +
          '                                                </div>\n' +
          '                                            </div>\n' +
          '                                        </div>\n' +
          '                                    </div>\n' +
          '                                </div>\n' +
          '                            </div>\n' +
          '                        </div>\n' +
          '                        <div class="mould_news">\n' +
          '                            <input type="text" class="layui-input mouldNews'+i+'">\n' +
          '                        </div>'
          // '              <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="mould_re">重置</button>'
        return html;
    }

    //轮播图新增tab页
    function wheelTabAdd(active,upload,i) {
        active.tabAdd('wheel',i,'图片'+ i,wheelHtml);
        active.tabChange('wheel',i);
        wheelUpload(upload, '#wheelImgBtn'+i);
    }

    //模块新增tab页
    function mouldTabAdd(active,upload,form,i) {
        active.tabAdd('mouldCon',i,'模块'+ i,mouldConHtml);
        form.render();
        active.tabChange('mouldCon',i);
        $('.container-demo').append('    <div class="mould-demo mould'+i+'">\n' +
            '        <div class="title"></div>\n' +
            '        <div class="con"></div>\n' +
            '    </div>')

        //模块按钮类型上传图片
        mouldUpload(upload,'#mould_btn_upload1_'+mouldIndex )
    }

    //模块中图片的新增tab页
    function m_iconTabAdd(active,upload,element,i) {
        active.tabAdd('mouldBtn'+mouldIndex,i,'图片'+ i,mouldBtnHtml);
        active.tabChange('mouldBtn'+mouldIndex,i);
        //模块按钮类型上传图片
        mouldUpload(upload,'#mould_btn_upload'+i+'_'+mouldIndex )

        //模块按钮类型图片tab删除
        element.on('tabDelete(mouldBtn'+mouldIndex+')', function(data){
            var index = $(this).parent().attr('lay-id');
            active.tabChange('mouldBtn'+mouldIndex,data.index);
            $('.mould'+mouldIndex).find('.m_btn_'+index+'').remove();
        });
    }

    //轮播图上传图片返回url并交互页面
    function wheelUpload(upload,elem) {
        upload.render({
            elem: elem //绑定元素
            ,url: parent.defaultUrl+'/file/imgs' //上传接口
            ,done: function(res){
                if (res.code === 200) {
                    var imgurl = res.data;
                    //图片预览
                    $('#wheelImgBtn'+wheelIndex).parent().find('.wheelImg img').attr('src',imgurl);
                    //'判断是否存在该下标的轮播图片 存在则替换
                    if ($('#wheel-demo').find('.carouselItem-'+wheelIndex).length > 0) {
                        $('#wheel-demo').find('.carouselItem-'+wheelIndex).children().attr('src',imgurl);
                    } else {
                        $('#wheel-demo>div').append('<div class="carouselItem carouselItem-'+wheelIndex+'"><img width="100%" src="'+imgurl+'"> </div>')
                    }
                    //重置轮播图
                    ins.reload();
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });
    }
    
    //模块按钮类型图片上传返回url并交互页面
    function mouldUpload(upload,elem) {
        upload.render({
            elem: elem //绑定元素
            ,url: parent.defaultUrl+'/file/imgs' //上传接口
            ,done: function(res){
                if (res.code === 200) {
                    var imgurl = res.data;
                    //图片预览
                    $('#mould_btn_upload'+mouldBtnIndex+'_'+mouldIndex).parent().find('.wheelImg img').attr('src',imgurl);
                    //判断是否存在该下标的图片 存在则替换
                    if ($('.mould'+mouldIndex).find('.m_btn_'+mouldBtnIndex+'').length > 0) {
                        $('.mould'+mouldIndex).find('.m_btn_'+mouldBtnIndex+'').find('img').attr('src',imgurl);
                    } else {
                        $('.mould'+mouldIndex).find('.con').append('<li class="m_btn m_btn_'+mouldBtnIndex+'"><img src="'+imgurl+'"></li>')
                    }
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });
    }

    function f_id(obj) {
        while (!obj.attr('data-id')) {
            obj = obj.parent();
        }
        return obj.attr('data-id')
    }
</script>
</body>
<!--配置容器-->
<div class="homeConfig layui-form">
    <div class="wheelConfig">
        <div class="configTitle">轮播图设置</div>
        <!--是否开启轮播-->
        <div class="layui-form-item">
            <label class="layui-form-label">是否开启轮播</label>
            <div class="layui-input-block">
                <input class="wheelSwitch" type="checkbox" checked="" name="switch" lay-filter="wheel" lay-skin="switch">
            </div>
        </div>
        <div class="wheelSize">
            <label class="layui-form-label">尺寸比例</label>
            <div class="layui-form-item wheelWidth">
                <label class="layui-form-label">宽度</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" required lay-verify="required" placeholder="100" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">%</div>
            </div>
            <div class="layui-form-item wheelHeight">
                <label class="layui-form-label">高度</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" required lay-verify="required" placeholder="400" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">px</div>
            </div>
        </div>

        <div class="layui-tab layui-tab-brief wheel_tab"  lay-allowClose="true" lay-filter="wheel">
            <ul class="layui-tab-title">
                <li lay-id="1" class="layui-this tab_1">图片1</li>
                <div class="tabAdd">
                    <i class="layui-icon ">&#xe61f;</i>
                </div>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div data-id="1">
                        <button type="button" class="layui-btn layui-btn-normal wheelImgBtn" id="wheelImgBtn1">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <div class="wheelImg"><img/></div>
                        <div class="layui-form-item wheelUrl">
                            <label class="layui-form-label">链接地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mouldTitleConfig">
        <div class="configTitle">模块设置</div>
    </div>
    <div class="mouldConConfig">
        <div class="layui-tab layui-tab-brief"  lay-allowClose="true" lay-filter="mouldCon">
            <ul class="layui-tab-title mould_ul">
                <li lay-id="1" class="layui-this tab_1">模块1</li>
                <div class="tabAdd">
                    <i class="layui-icon ">&#xe61f;</i>
                </div>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div data-id="1">
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否显示标题</label>
                            <div class="layui-input-block mouldTitleSwitch">
                                <input type="checkbox" checked="" lay-filter="mouldTitle" name="switch" lay-skin="switch">
                            </div>
                        </div>
                        <div class="layui-form-item mouldTitleName">
                            <label class="layui-form-label">标题名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" placeholder="请输入标题名称" autocomplete="off" class="layui-input mouldTitleIpt">
                            </div>
                        </div>
                        <label class="layui-form-label">尺寸比例</label>
                        <div class="layui-form-item mouldWidth">
                            <label class="layui-form-label">宽度</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" required lay-verify="required" placeholder="100" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">%</div>
                        </div>
                        <div class="layui-form-item mouldHeight">
                            <label class="layui-form-label">高度</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" required lay-verify="required" placeholder="400" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">px</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">内容类型</label>
                            <div class="layui-input-block">
                                <select class="mouldType" name="mouldtype1" lay-verify="required" lay-filter="mouldtype">
                                    <option value="0">网页</option>
                                    <option value="1">新闻</option>
                                    <option value="2">按钮</option>
                                </select>
                            </div>
                        </div>
                        <div class="mould_web">
                            <div class="layui-form-item mouldUrl">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="mould_btn">
                            <div class="layui-tab layui-tab-brief mould_btn_tab"  lay-allowClose="true" lay-filter="mouldBtn1">
                                <ul class="layui-tab-title">
                                    <li lay-id="1" class="layui-this tab_1">图片1</li>
                                    <div class="tabAdd">
                                        <i class="layui-icon ">&#xe61f;</i>
                                    </div>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <div data-id="1">
                                            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm mould_btn_upload" id="mould_btn_upload1_1">
                                                <i class="layui-icon">&#xe67c;</i>上传图片
                                            </button>
                                            <div class="wheelImg"><img/></div>
                                            <div class="layui-form-item mould_btnUrl">
                                                <label class="layui-form-label">链接地址</label>
                                                <div class="layui-input-block">
                                                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mould_news">
                            <input type="text" class="layui-input mouldNews1">
                        </div>
<!--                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="mould_re">重置</button>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="layui-btn layui-btn-normal configSave">保存配置</button>
</div>
</html>